{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello word</title>
<style>
		html, body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		.div-a{ float:left;width:50%;height:100%;border:1px solid #F00;overflow-y:scroll}
		.div-b{ float:right;width:49%;height:100%;border:0px solid #000}


        div#butt	{
            height:50px;
            border-bottom: 0px solid #c5c5c5;
            background:#fff;
            }

        div#butt input {
            margin:10px 0 0 10px;
            background:blueviolet;
            color:#fff;
            width:150px;
            height:30px;
            font:14px Verdana, Arial, Helvetica, sans-serif;
            }

        form{

            height:45%;
            width:100%;
            margin-left:0px;
			border:0px solid #c5c5c5;
            }
		#CodeArea{
			height:100%;
            width:100%;
            margin-left:0px;
		}
        #TestCode{
            height:85%;
			width:99%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }
        #CodeArea h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

        #result	{
            height:48%;
            width:100%;
			margin-left:0px;
			border:0px solid red;
            }
		#output{
            width:99%;
            height:85%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }

        #result h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

</style>
<script src="{% static "common/jquery-1.8.2.js" %}" type="text/javascript"></script>
</head>
<body>
<div class="div-a">
    <li data-role="list-divider" data-theme="b">Python简介</li>
  <div id="" class="ui-body ui-body-a">
    <p>Python由Guido van Rossum于1989年底发明的，官方说法：Python是“一种解释型的、面向对象的、带有动态语义的高级程序设计语言”。
        解释型意味着开发过程中不需要编译过程；面向对象是指Python支持面向对象的风格或代码封装在对象的编程技术；</p>
    <h3>Python可以做什么？</h3>
    <p>
        Python广泛用于系统管理工作（比如它是很多Linux发行版的重要组成部分）；
        也可以作为从零起步的入门编程语言；可以做日常任务，比如自动备份你的MP3；
        可以做网站，很多著名的网站包括YouTube就是Python写的（前端）；
        也可以做网络游戏的后台，很多在线游戏的后台都是Python开发的；
        Industrial Light&Magic（工业光魔公司）在高预算影片中使用Python制作影片的特效；
        Google用它实现网络爬虫和搜索引擎中的很多组件；
        同时，Python也被广泛应用在机器学习、人工智能领域。
    </p>
    <h3>Python的优点</h3>
    <h4>简单易学</h4>
    <p>
        Guido van Rossum给Python的定位是“优雅”、“明确”、“简单”，所以Python程序看上去总是简单易懂，初学者学Python，不但入门容易，而且将来深入下去，可以编写那些非常非常复杂的程序。
    </p>
    <h4>方便快捷</h4>
    <p>
        Python为我们提供了非常完善的基础代码库，覆盖了网络、文件、GUI、数据库、文本等大量内容，用Python开发，许多功能都不必从零编写，除了内置的库外，Python还有大量的第三方库可供你直接使用。
    </p>
    <h4>灵活多变</h4>
    <p>
        基于Python源代码的开源性，Python可以被移植到很多平台；同时也可以嵌入到C/C++程序，让你的程序的用户获得"脚本化"的能力；如果你需要一段运行很快的关键代码，或者是想要编写一些不愿开放的算法，你可以使用C或C++完成那部分程序，然后从你的Python程序中调用。
    </p>
    <h3>Python的缺点</h3>
    <p>
        第一个缺点是运行速度慢，和C程序相比非常慢，因为Python是解释型语言，你的代码在执行时会一行一行地翻译成CPU能理解的机器码，这个翻译过程非常耗时，所以很慢。而C程序是运行前直接编译成CPU能执行的机器码，所以非常快。但是大量的应用程序不需要这么快的运行速度，因为用户根本感觉不出来。<br/>
        第二个缺点就是代码不能加密。如果要发布你的Python程序，实际上就是发布源代码。但是目前的互联网时代，靠卖软件授权的商业模式越来越少了，靠网站和移动应用卖服务的模式越来越多了，后一种模式不需要把源码给别人。
    </p>
  </div>

</div>
<div class="div-b">
	<form action="#" method="post" id="tryitform" name="tryitform" onSubmit="validateForm();" target="i" id="form-a">
		<div id="CodeArea">
		<h2>编辑您的代码：</h2>
		<textarea id="TestCode" wrap="logical">
#!/usr/bin/python
# -*- coding: utf-8 -*-
print "hello world!"
		</textarea>
		</div>
		<input type="hidden" id="code" name="code"  />

	</form>
<div id="butt">
		<input type="button" value="提交代码" onClick="submitTryit()" id="submit">
		</div>
	<div id="result">
		<h2>查看结果:</h2>
		<textarea id="output" wrap="logical"></textarea>
	</div>
</div>
<script type="text/javascript">
	function submitTryit()
	{

	    var t=document.getElementById("TestCode").value;

	    document.getElementById("code").value=t;

	    validateForm();
        $.ajax({
         type:"GET",
         url:"/moon/codeHandler",
         data:{"code":t},
         success:function(ret){
            $('#output').html(ret.result)
            }
        })

	}

	function validateForm()
	{
	var code=document.getElementById("code").value;
	if (code.length>5000)
		{
		document.getElementById("code").value="<h1>Error</h1>";
		}
	}
</script>
</body>
</html>
